<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>应用轮廓 Example</title>
        <meta name="auther" content="wangjiale"/>
        <meta name="description" content="A simper example"/>
        <link rel="shortcut icon" herf="favicon.ico" type="image/x-icon"/>
        <style>
            p{
                width:30%;
                padding:5px;
                border:medium double black;
                background-color:lightgray;
                margin:2px;
                float:left;
            }
            #fruittext{
                outline:thick solid red;
            }
        </style>
    </head>
    <body>
        <p>
            There are lots of different kinds of fruil-there are over 500 
            varieties of banana alone. By the time we add the countless 
            types of apples,oranges,and other well-known fruit,we are f
            aced with thousands of choices.
        </p>
        <p id="fruittext">
            There are lots of different kinds of fruil-there are over 500 
            varieties of banana alone. By the time we add the countless 
            types of apples,oranges,and other well-known fruit,we are f
            aced with thousands of choices.
        </p>
        <p>
            There are lots of different kinds of fruil-there are over 500 
            varieties of banana alone. By the time we add the countless 
            types of apples,oranges,and other well-known fruit,we are f
            aced with thousands of choices.
        </p>
        <button>Outline Off</button>
        <button>Outline On</button>
        <script>
            var buttons=document.getElementsByTagName("button");
            for (var i=0;i<buttons.length;i++){
                buttons[i].onclick=function(e){
                    var elem=document.getElementById("fruittext");
                    if(e.target.innerHTML=="Outline Off"){
                        elem.style.outline="none";
                    }else{
                        elem.style.outlineColor="red";
                        elem.style.outlineStyle="solid";
                        elem.style.OutlineWidth="thick";
                    }
                };
            }
        </script>
    </body>
</html>